<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" th:href="@{Css/bootstrap4.6.2.css}">
    <script th:src="@{JS/jquery.slim.min.js}"></script>
    <script th:src="@{JS/bootstrap.min.js}"></script>
    <title>员工信息</title>
    <style>
        /*table {*/
        /*    width: 100%;*/
        /*    border-collapse: collapse;*/
        /*}*/
        /*th, td {*/
        /*    border: 1px solid black;*/
        /*    padding: 8px;*/
        /*    text-align: left;*/
        /*}*/
        /*th {*/
        /*    background-color: #f2f2f2;*/
        /*}*/
        body {
            font-family: Arial, sans-serif;
        }
        table {
            border-collapse: collapse;
            width: 100%;
        }
        th, td {
            border: 1px solid #ddd;
            padding: 8px;
            text-align: left;
        }
        th {
            background-color: #f2f2f2;
        }
        a {
            text-decoration: none;
            color: blue;
        }
        a:hover {
            text-decoration: underline;
        }
    </style>
</head>
<body>
<h1>部门和员工信息</h1>

<!-- 创建一个表格 -->
<table border="1">
    <thead>
    <tr>
        <th>部门编号</th>
        <th>部门名称</th>
        <th>部门位置</th>
        <th>员工信息</th>
    </tr>
    </thead>
    <tbody>
    <!-- 循遍部门数据 -->
    <!-- 注意：以下示例使用了JavaScript模拟的数据 -->
    <tr th:each ="dept : ${deptListMore}">
        <td th:text="${dept.deptNo}"></td>
        <td th:text="${dept.dName}"></td>
        <td th:text="${dept.loc}" ></td>
        <td >
            <table border="1">
                <thead>
                <tr>
                    <th>编号</th>
                    <th>姓名</th>
                    <th>职位</th>
                    <th>级别</th>
                    <th>入职日期</th>
                    <th>工资</th>
                    <th>奖金</th>
                </tr>
                </thead>
                <tbody>
                <!-- 循遍员工数据 -->
                <tr th:each ="emp : ${dept.empList}">
                    <td th:text="${emp.empNo}"></td>
                    <td th:text="${emp.eName}"></td>
                    <td th:text="${emp.job}"></td>
                    <td th:text="${emp.mgr}"></td>
                    <td th:text="${emp.hirdate}"></td>
                    <td th:text="${emp.sal}"></td>
                    <td th:text="${emp.comm}"></td>
                </tr>
                </tbody>
            </table>
        </td>
    </tr>
    </tbody>
</table>
</body>
</html>
